<template>
  <div class="min-h-[100vh] bg-[#f2f2f2] p-[15px] pb-[60px]">
    <div class="flex items-center mb-[10px] justify-end">
      <div class="text-[14px] mr-[5px]" @click="screen">筛选</div>
      <van-image width="13" height="13" :src="getAssetsFile('product/sx.png')" />
    </div>
    <div>
      <item :list="list"></item>
      <div v-if="list.length <= 0 && !loading">
        <nodata></nodata>
      </div>
    </div>

    <div class="text-[14px] relative">
      <van-popup v-model:show="showTop" position="top" :style="{ height: '37%' }">
        <div class="p-[15px]">
          <div class="">
            <div>按公司</div>
            <div class="flex mt-[10px]">
              <div class="px-[13px] py-[5px] mr-[10px]" v-for="item in classInfo.brand" :class="{
                'bg-[#F38E40] text-white': item.isActive,
                'bg-[#FCFCFC] text-[#898989]': !item.isActive,
              }" @click="clickBrand(item.id)">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="mt-[20px]">
            <div>按产品类型</div>
            <div class="flex mt-[10px]">
              <div class="px-[13px] py-[5px] mr-[10px]" v-for="item in classInfo.classify" :class="{
                'bg-[#F38E40] text-white': item.isActive,
                'bg-[#FCFCFC] text-[#898989]': !item.isActive,
              }" @click="clickClassify(item.id)">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="w-full flex items-center absolute bottom-0">
          <div @click="reset" class="flex-1 flex justify-center items-center text-[#9A9A9A] h-[46px]">
            重置
          </div>
          <div @click="confirm" class="flex-1 flex justify-center items-center text-white bg-[#F38E40] h-[46px]">
            确定
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script setup lang="ts">
import getAssetsFile from "@/utils/getImageurl";
import item from "./item.vue";
import nodata from "@/components/nodata.vue";
import { ref, reactive, inject } from "vue";
import { Index, indexClassify } from "@/utils/api";
const list = ref([] as any);
let loading = inject<any>("loading");
const classInfo = reactive<classType>({
  brand: [],
  classify: [],
});
const param = reactive({
  classify_id: "",
  brand_id: "",
});
const showTop = ref(false);
const getData = async () => {
  const res = await Index(param);
  list.value = res.msg;
};
getData();
const getClass = async () => {
  const res = await indexClassify("");
  let key: keyof classType;
  for (key in classInfo) {
    classInfo[key] = res.msg[key];
  }
  // console.log(classInfo);
};
getClass();
//筛选
const screen = () => {
  showTop.value = true;
};
//选择公司
const clickBrand = (id: string) => {
  // console.log(id);
  classInfo.brand.forEach((item: any) => {
    if (item.id == id) {
      item["isActive"] = !item["isActive"];
    } else {
      item["isActive"] = false;
    }
  });
  param.brand_id = id;
  // getData();
};
const clickClassify = (id: string) => {
  classInfo.classify.forEach((item: any) => {
    if (item.id == id) {
      item["isActive"] = !item["isActive"];
    } else {
      item["isActive"] = false;
    }
  });

  param.classify_id = id;
  //getData();
};
//重置
const reset = () => {
  classInfo.classify.forEach((item: any) => {
    item["isActive"] = false;
  });
  classInfo.brand.forEach((item: any) => {
    item["isActive"] = false;
  });
  param.brand_id = '';
  param.classify_id = ''
};
const confirm = () => {
  getData();
  showTop.value = false;
};
</script>
<style scoped lang="scss"></style>
